<template>
  <el-container>
    <el-header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: $store.state.authority===4?'/admin/library':'/library' }">论文库</el-breadcrumb-item>
        <el-breadcrumb-item><span>论文详情</span></el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main>
      <!--  论文基本信息   -->
      <div class="paper-info">
        <el-divider content-position="left">
          <span style="font-size: x-large">论文基本信息</span>
        </el-divider>
        <p>
          <span style="font-size:xxx-large">{{ this.paper.title }}</span>
        </p>
        <p style="margin-bottom: 2%">
          <span class="info1">作者：{{ this.author }}</span>
          <span class="info1">发布时间：{{ this.paper.releaseDate }}</span>
        </p>
        <p style="margin-bottom: 5%">
          <span class="info1">上传者：{{ this.paper.uploaderName }}</span>
          <span class="info1">上传时间：{{ this.paper.releaseDate }}</span>
        </p>
        <p>
          <span class="paper-abstract">摘要：{{ this.paper.paperAbstract }}</span>
        </p>
        <p class="info2">发布会议：{{ this.paper.conference }}</p>
        <p class="info2">论文类型：{{ this.typeArray[this.paper.type] }}</p>
        <p class="info2">科研方向：{{ this.directionName }}</p>
        <p class="info2" >
          <el-link target="_blank" type="danger" @click="deletePaper" v-if="editable" style="margin-left: 20px"><i class="el-icon-delete"></i>删除</el-link>
          <el-link target="_blank" type="primary" @click="PaperView" style="margin-left: 20px"><i class="el-icon-view"></i>站内查看论文</el-link>
          <el-link target="_blank" type="primary" :href="paper.paperLink" style="margin-left: 20px"><i class="el-icon-share"></i>跳转到论文详情页</el-link>
        </p>
      </div>

      <!--  引用关系    -->
      <div class="paper-reference">
        <el-divider content-position="left">
          <span style="font-size: x-large">论文引用信息</span>
        </el-divider>
        <div v-if="reference.length!==0">
          <el-table
            :data="reference"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              width="60">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.$index+1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="标题"
              width="600">
              <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.referenceTitle }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope" v-if="editable">
                <el-button
                  size="mini"
                  @click="handleView(scope.row)">查看
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteReference(scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <p class="info2" style="margin-top: 20px" v-if="editable">
            <el-link target="_blank" type="primary" @click="formVisible=true"><i class="el-icon-circle-plus"></i>添加引用</el-link>
          </p>
        </div>
        <el-empty v-else>
          <p>该论文还没有引用</p>
          <el-link target="_blank"
                   type="primary"
                   v-if="editable"
                   @click="formVisible=true">点此添加引用</el-link>
        </el-empty>
        <el-dialog title="添加论文/修改论文数据"
                   :visible.sync="formVisible"
                   @close="clear"
                   ref="dialog"
                   width="30%">
          <el-form :model="form" ref="addForm">
            <el-form-item :rules="[ { required: true, message: '请输入引用文章的标题', trigger: 'blur' }]"
                          label="引用标题" prop="input">
              <el-autocomplete
                v-model="form.input"
                :fetch-suggestions="querySearchAsync"
                style="caret-color: black"
                placeholder="请输入内容"
                @select="handleSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="addReference('addForm')">确定</el-button>
          <el-button @click="clear">取消</el-button>
        </span>
        </el-dialog>
      </div>

      <!--  笔记部分    -->
      <div class="paper-note">
        <el-tooltip effect="dark" placeholder="right"
                    v-for="item in note"
                    :key="item.noteId">
          <p slot="content" style="font-size: 13px;margin-bottom: 6px">
            <span>上传者:{{ item.uploaderName }}</span>
            <span>评论数量：{{item.commentNum}}</span>
          </p>
          <el-card shadow="hover" class="note">
            <p class="note-title">
              <el-link target="_blank" type="primary" @click="viewNote(item.noteId)">
                <span style="font-size:large">{{ item.uploaderName }}的笔记</span>
              </el-link>
            </p>
            <p class="note-comment-num">评论数量：{{item.commentNum}}</p>
            <p class="note-delete"><el-link target="_blank" type="danger" @click="deleteNote(item.noteId)" style="margin-left: 20px"><i class="el-icon-delete"></i>删除</el-link></p>
          </el-card>
        </el-tooltip>

        <!--    分页      -->
        <el-row v-if="note!==null&&note.length!==0">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="note.length"
            class="pagination"
          >
          </el-pagination>
        </el-row>
        <el-empty v-else>
          <p>该论文还没有其他用户上传笔记</p>
        </el-empty>
      </div>
    </el-main>
  </el-container>
</template>

<script>

export default {
  name: "AdminDetails",
  inject:['reload'],
  data() {
    return {
      //  论文基本信息
      paperId: 0,
      paper: {},
      directions: [],
      editable:false,

      //引用相关信息
      reference: [],
      formVisible: false,
      form: {
        input:'',
        ref:{}
      },
      //笔记相关
      note:[],
      //笔记页码相关
      currentPage: 1,
      pageSize: 15,
    }
  },
  methods: {
    /*
      初始化论文信息
     */
    getPaper() {
      this.$axios.get(`/paper/get/paperId=${this.paperId}`).then(res => {
        this.paper = res.data.data
        this.editable= this.paper.id===this.$store.state.id ||this.$store.state.authority===4
      }).catch(failRes => {
        console.log(failRes)
      })
      this.$axios.get(`/paper/getDirections/paperId=${this.paperId}`).then(res => {
        this.directions = res.data.data
      }).catch(failRes => {
        console.log(failRes)
      })
      this.$axios.get(`/reference/get/paperId=${this.paperId}`).then(res => {
        this.reference = res.data.data
      }).catch(failRes => {
        console.log(failRes)
      })
      this.$axios.get(`/note/get/paperId=${this.paperId}/page=${this.currentPage-1}`).then(res=>{
        this.note=res.data.data
      }).catch(failRes=>{
        console.log(failRes)
      })
    },


    /*
     删除
    */
    deletePaper(){
      this.$axios.get(`/paper/delete?paperId=${this.paper.paperId}`).then(()=>{
        this.loadAllPapers()
      }).catch(failRes=>{console.log(failRes)})
    },


    /*
      站内查看论文页面
     */
    PaperView(){
      this.$router.push({
        name:'AdminContent',
        params:{
          paperId:this.paperId,
          url:this.paper.paperLink
        }
      })
    },


    //引用相关
    /*
      创建过滤器
     */
    createFilter(){
      return (item) => {
        if(item.name!==this.paperId) return item.value
      };
    },
    /*
    异步处理查询
     */
    querySearchAsync(queryString, cb) {
      if (queryString !== "") {
        this.getPlanTypeData(queryString, (data) => {
          let results;
          if (queryString && !data[0].noId) {
            //输入框有值且有匹配数据时
            results = data.filter(this.createFilter());
          } else {
            //没有匹配数据时显示自定义的字段
            results = data;
          }
          cb(results);
        });
      }
    },

    /*
      获得数据
     */
    async getPlanTypeData(val, fun) {
      let dataArr = [];
      const { data } = await this.$axios.get(
        `/paper/getAll/title=${val}/ordered?key=upload_date`
        +`&method=DESC&page=0`,
      );
      if (data.code === 200) {
        let dataList = data.data;
        if (dataList.length > 0) {
          dataList.forEach((item) => {
            dataArr.push({
              value: item.title,
              name: item.paperId,
            });
          });
        } else {
          dataArr.push({
            value: "未找到相关结果，换个词试试",
            noId: "未找到相关结果，换个词试试",
          });
        }
        fun(dataArr);
      }
    },

    /*
      处理选择
     */
    handleSelect(item){
      this.form.ref=item
    },

    /*
    添加引用
     */
    addReference(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios.post(`/reference/add`,{
            paperId:this.paperId,
            referenceId:this.form.ref.name
          }).then(()=>{
            this.formVisible=false
            this.getPaper()
          }).catch(failRes=>{console.log(failRes)})
        }
      })
    },

    /*
    删除引用
     */
    deleteReference(row) {
      this.$axios.get(`/reference/delete?paperId=${this.paperId}&referenceId=${row.referenceId}`).then(()=>{
        this.getPaper()
      }).catch(failRes=>{console.log(failRes)})
    },
    /*
      关闭弹窗
     */
    clear() {
      this.form={
        input:'',
        ref:{}
      }
      this.formVisible = false
    },

    /*
      查看引用论文
     */
    handleView(row){
      this.$router.push({
        name: 'AdminDetails',
        params: {
          paperId:row.referenceId,
        }
      }).then(()=>{
        this.reload()
      })
    },


    //笔记的方法
    /*
      查看笔记
     */
    viewNote(id){
      this.$router.push({
        name:'AdminNote',
        params:{
          paperId:this.paperId,
          noteId:id,
          editable:false
        }
      })
    },

    /*
    删除笔记
     */
    deleteNote(id){
      this.$axios.get(`/note/delete/noteId=${id}`).then(()=>{
        this.getPaper()
        this.$message.info('删除成功')
      }).catch(failRes=>console.log(failRes))
    },
    // 处理页码
    handleCurrentChange(page) {
      this.currentPage = page
      this.getPaper()
    },
  },
  /*
  计算属性
   */
  computed: {
    typeArray() {
      return ['理论证明型', '综述性', '实验型', '工具型', '数据集型']
    },
    author() {
      let arr = []
      if (this.paper.author) {
        arr = this.paper.author.split(' ')
        return arr.join(',')
      }
      return ''
    },
    directionName() {
      if (this.directions.length !== 0) {
        let names = ''
        this.directions.forEach(item => {
          names += item.name + ' '
        })
        return names
      } else return ''
    }
  },

  mounted() {
    this.paperId = this.$route.params.paperId
    this.getPaper()
  },
}
</script>

<style scoped>
div, span {
  caret-color: transparent;
}

.paper-info {
  margin-bottom: 40px;
}

.info1 {
  margin-left: 20px;
  font-size: large;

}

.paper-abstract {
  display: flex;
  left: 10px;
}

.info2 {
  display: flex;
  left: 10px
}

.my-note{
  margin-top: 40px;
}

.note-title{
  display: flex;
  right: 0;
}

.note-comment-num{
  display: flex;
  right:0;
}

.note-delete{
  display: flex;
  right:0;
}
</style>
